<template>
  <div class="layercut">
    <div class="c_top">
      <div class="left-nav">
        <div class="optionShow">
          <el-button
            id="optionShow"
            type="text"
            icon="el-icon-guide"
            @click="centerDialogVisible = true"
          >操作说明</el-button>
        </div>
        <el-dialog title="步骤介绍" :visible.sync="centerDialogVisible" width="30%">
          <p>1、此时的拔高系数为3米；</p>
          <p>2、点击选取颜色，点击提交按钮，实现岩性着色；</p>
          <p>3、通过滑块控制模型大小；</p>
          <p>4、点击添加剖面，生成剖切后的模型剖面。</p>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
        <div class="optionShow">
          <el-button id="optionShow" type="text" icon="el-icon-setting">主要功能</el-button>
        </div>
        <div class="optionShow">
          <el-button id="optionShow" class="color" type="text" style=" padding-left: 15px;">
            <strong>1、</strong>岩性着色
          </el-button>
        </div>
        <!--岩性着色-->
        <div class="lithology">
          <label for="color-1">
            填土, 素填土:
            <input id="color-1" type="color" value="#FF7F00" />
          </label>
          <label for="color-2">
            黄土：
            <input id="color-2" type="color" value="#FFEC8B" />
          </label>
          <label for="color-3">
            古土壤:
            <input id="color-3" type="color" value="#8B7355" />
          </label>
          <label for="color-4">
            粉质粘土, 粉细砂：
            <input id="color-4" type="color" value="#EEDC82" />
          </label>
          <label for="color-5">
            卵石:
            <input id="color-5" type="color" value="#96CDCD" />
          </label>
          <label for="color-6">
            圆砾, 砾砂：
            <input id="color-6" type="color" value="#4682B4" />
          </label>
          <label for="color-7">
            中粗砂:
            <input id="color-7" type="color" value="#00CD00" />
          </label>
          <button id="color-change" @click="colorChange">提交</button>
        </div>
        <div class="optionShow">
          <el-button id="optionShow" class="color" type="text" style=" padding-left: 15px;">
            <strong>2、</strong>地层剖切
          </el-button>
        </div>
        <!--地层剖切-->
        <div class="optionShow">
          <el-button id="optionShow" class="color" type="text" style=" padding-left: 15px;">
            <strong>2.1、</strong>地层剖切界面
          </el-button>
        </div>
        <div>
          <button id="show" @click="show" style="margin-top:15px;">显示界面</button>
          <button id="hide" @click="hide" style="margin-top:15px;">隐藏界面</button>
        </div>
        <div style="margin:15px 0;" class="input">
          <label for="clip-up">
            上：
            <input type="range" id="clip-up" name="up" min="0" max="200" value="0" @change="up" />
          </label>
          <label for="clip-down">
            下：
            <input
              type="range"
              id="clip-down"
              name="down"
              min="0"
              max="200"
              value="0"
              @change="down"
            />
          </label>
          <label for="clip-east">
            东：
            <input
              type="range"
              id="clip-east"
              name="east"
              min="0"
              max="2500"
              value="0"
              @change="east"
            />
          </label>
          <label for="clip-west">
            西：
            <input
              type="range"
              id="clip-west"
              name="west"
              min="0"
              max="2500"
              value="0"
              @change="west"
            />
          </label>
          <label for="clip-south">
            南：
            <input
              type="range"
              id="clip-south"
              name="south"
              min="0"
              max="2000"
              value="0"
              @change="south"
            />
          </label>
          <label for="clip-north">
            北：
            <input
              type="range"
              id="clip-north"
              name="north"
              min="0"
              max="2000"
              value="0"
              @change="north"
            />
          </label>
        </div>
        <div>
          <button id="add-section" @click="addSection">添加剖面</button>
          <button id="clean-section" @click="cleanSection">清除剖面</button>
        </div>
      </div>
      <div
        id="WebGL-output"
        class="webgl"
        v-loading="loading"
        element-loading-text="模型加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      ></div>
    </div>

    <div class="guid">
      <div class="guidBar">
        <el-button icon="el-icon-arrow-left" plain @click="previous">上一页</el-button>
        <el-button plain @click="nextStep">
          下一页
          <i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
import * as THREE from "three/build/three.js";
import { TrackballControls } from "three/examples/js/controls/TrackballControls.js";
import { Notification } from "element-ui";
export default {
  name: "layercut",
  data() {
    return {
      centerDialogVisible: true,
      gtpoints: [],
      clock: null,
      scene: null,
      webGLRenderer: null,
      controls: null,
      GTPGeometry: null,
      width: "",
      height: "",
      camera: null,
      h: 3.0,
      color1: "#FF7F00",
      color2: "#FFEC8B",
      color3: "#8B7355",
      color4: "#EEDC82",
      color5: "#96CDCD",
      color6: "#4682B4",
      color7: "#00CD00",
      sections: [],
      clipPlanes: [
        new THREE.Plane(new THREE.Vector3(0, 0, -1), 200), //上
        new THREE.Plane(new THREE.Vector3(0, 0, 1), 200), //下
        new THREE.Plane(new THREE.Vector3(1, 0, 0), 2500), //东
        new THREE.Plane(new THREE.Vector3(-1, 0, 0), 2500), //西
        new THREE.Plane(new THREE.Vector3(0, -1, 0), 2000), //南
        new THREE.Plane(new THREE.Vector3(0, 1, 0), 2000) //北
      ],
      cube: "",
      cubeWire: "",
      loading: false
    };
  },
  methods: {
    colorChange() {
      this.color1 = this.convertcolor(document.getElementById("color-1").value);
      this.color2 = this.convertcolor(document.getElementById("color-2").value);
      this.color3 = this.convertcolor(document.getElementById("color-3").value);
      this.color4 = this.convertcolor(document.getElementById("color-4").value);
      this.color5 = this.convertcolor(document.getElementById("color-5").value);
      this.color6 = this.convertcolor(document.getElementById("color-6").value);
      this.color7 = this.convertcolor(document.getElementById("color-7").value);
      document.getElementById("WebGL-output").innerHTML = "";
      this.init();
    },
    convertcolor(color) {
      color = color.replace("#", "0x");
      return parseInt(color);
    },
    addSection() {
      var score = Math.round(Math.random() * 5) + 5;
      console.log(score);
      this.$store.dispatch("addfourScoreByAction", score);
      var up = document.getElementById("clip-up").value;
      var down = document.getElementById("clip-down").value;
      var east = document.getElementById("clip-east").value;
      var west = document.getElementById("clip-west").value;
      var south = document.getElementById("clip-south").value;
      var north = document.getElementById("clip-north").value;

      var ax = 2500.0 - west;
      var bx = east - 2500.0;
      var ay = 2000.0 - south;
      var by = north - 2000.0;
      var az = 200.0 - up;
      var bz = down - 200.0;

      if (east > 255) {
        this.addSectionAjax(bx, ay, az, bx, by, az, bx, by, bz, bx, ay, bz);
      }
      if (west > 255) {
        this.addSectionAjax(ax, ay, az, ax, by, az, ax, by, bz, ax, ay, bz);
      }
      if (south > 155) {
        this.addSectionAjax(ax, ay, az, bx, ay, az, bx, ay, bz, ax, ay, bz);
      }
      if (north > 155) {
        this.addSectionAjax(ax, by, az, bx, by, az, bx, by, bz, ax, by, bz);
      }
    },
    addSectionAjax(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4) {
      var x01 = x1 + 2245.0;
      var y01 = y1 + 1845.0;
      var z01 = z1 / this.h + 382.0;
      var x02 = x2 + 2245.0;
      var y02 = y2 + 1845.0;
      var z02 = z2 / this.h + 382.0;
      var x03 = x3 + 2245.0;
      var y03 = y3 + 1845.0;
      var z03 = z3 / this.h + 382.0;
      var x04 = x4 + 2245.0;
      var y04 = y4 + 1845.0;
      var z04 = z4 / this.h + 382.0;

      let param = new URLSearchParams();
      param.append("x1", x01);
      param.append("y1", y01);
      param.append("z1", z01);
      param.append("x2", x02);
      param.append("y2", y02);
      param.append("z2", z02);
      param.append("x3", x03);
      param.append("y3", y03);
      param.append("z3", z03);
      param.append("x4", x04);
      param.append("y4", y04);
      param.append("z4", z04);
      this.$axios
        .post(
          "http://192.168.3.165:3102/dcvir/getSectionByCoordinate12",
          param,
          {
            emulateJSON: true
          },
          { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
        )
        .then(res => {
          this.sections = res.data;
          console.log(res.data);
          this.addData(this.sections);
        })
        .catch(console.log);
    },
    addData(sections) {
      for (let i in sections) {
        var section = sections[i];
        var vertices = new Float32Array([
          section.xc1 - 2245,
          section.yc1 - 1845,
          (section.zc1 - 382) * this.h,
          section.xc2 - 2245,
          section.yc2 - 1845,
          (section.zc2 - 382) * this.h,
          section.xc3 - 2245,
          section.yc3 - 1845,
          (section.zc3 - 382) * this.h,
          section.xc4 - 2245,
          section.yc4 - 1845,
          (section.zc4 - 382) * this.h
        ]);
        var indexes = new Uint16Array([0, 1, 2, 1, 2, 3]);

        var SectionGeometry = new THREE.BufferGeometry();
        SectionGeometry.addAttribute(
          "position",
          new THREE.BufferAttribute(vertices, 3)
        );

        SectionGeometry.index = new THREE.BufferAttribute(indexes, 1);

        if (section.sid == 1) {
          var sectionMaterial = new THREE.MeshBasicMaterial({
            color: this.color1,
            side: THREE.DoubleSide
          });
        }
        if (section.sid == 2) {
          var sectionMaterial = new THREE.MeshBasicMaterial({
            color: this.color2,
            side: THREE.DoubleSide
          });
        }
        if (section.sid == 3) {
          var sectionMaterial = new THREE.MeshBasicMaterial({
            color: this.color3,
            side: THREE.DoubleSide
          });
        }
        if (section.sid == 4) {
          var sectionMaterial = new THREE.MeshBasicMaterial({
            color: this.color4,
            side: THREE.DoubleSide
          });
        }
        if (section.sid == 5) {
          var sectionMaterial = new THREE.MeshBasicMaterial({
            color: this.color5,
            side: THREE.DoubleSide
          });
        }
        if (section.sid == 6) {
          var sectionMaterial = new THREE.MeshBasicMaterial({
            color: this.color6,
            side: THREE.DoubleSide
          });
        }
        if (section.sid == 7) {
          var sectionMaterial = new THREE.MeshBasicMaterial({
            color: this.color7,
            side: THREE.DoubleSide
          });
        }
        var SectionMesh = new THREE.Mesh(SectionGeometry, sectionMaterial); //var GTPMesh = new THREE.Mesh(GTPGeometry, material);
        SectionMesh.name = "section";
        this.scene.add(SectionMesh);
      }
      this.sections = [];
    },
    up() {
      var c0 = parseInt(document.getElementById("clip-up").value);
      var c1 = parseInt(document.getElementById("clip-down").value);

      this.clipPlanes[0].constant = 200 - c0;
      this.cube.scale.setZ((400 - c0 - c1) / 400);
      this.cube.position.z = (c1 - c0) / 2;
      this.cubeWire.update();
    },
    down() {
      var c0 = parseInt(document.getElementById("clip-up").value);
      var c1 = parseInt(document.getElementById("clip-down").value);
      this.clipPlanes[1].constant = 200 - c1;
      this.cube.scale.setZ((400 - c0 - c1) / 400);
      this.cube.position.z = (c1 - c0) / 2;
      this.cubeWire.update();
    },
    east() {
      var c2 = parseInt(document.getElementById("clip-east").value);
      var c3 = parseInt(document.getElementById("clip-west").value);
      this.clipPlanes[2].constant = 2500 - c2;
      this.cube.scale.setX((5000 - c2 - c3) / 5000);
      this.cube.position.x = (c2 - c3) / 2;
      this.cubeWire.update();
    },
    west() {
      var c2 = parseInt(document.getElementById("clip-east").value);
      var c3 = parseInt(document.getElementById("clip-west").value);
      this.clipPlanes[3].constant = 2500 - c3;
      this.cube.scale.setX((5000 - c2 - c3) / 5000);
      this.cube.position.x = (c2 - c3) / 2;
      this.cubeWire.update();
    },
    south() {
      var c4 = parseInt(document.getElementById("clip-south").value);
      var c5 = parseInt(document.getElementById("clip-north").value);
      this.clipPlanes[4].constant = 2000 - c4;
      this.cube.scale.setY((4000 - c4 - c5) / 4000);
      this.cube.position.y = (c5 - c4) / 2;
      this.cubeWire.update();
    },
    north() {
      var c4 = parseInt(document.getElementById("clip-south").value);
      var c5 = parseInt(document.getElementById("clip-north").value);
      this.clipPlanes[5].constant = 2000 - c5;
      this.cube.scale.setY((4000 - c4 - c5) / 4000);
      this.cube.position.y = (c5 - c4) / 2;
      this.cubeWire.update();
    },
    cleanSection() {
      var allChildren = this.scene.children;
      var numObjects = this.scene.children.length;
      for (var i = 0; i < numObjects; i++) {
        var object = allChildren[i];

        if (object.name == "section") {
          this.scene.remove(object);
          i--;
        }
      }
    },
    show() {
      var allChildren = this.scene.children;
      var numObjects = this.scene.children.length;
      for (var i = 0; i < numObjects; i++) {
        var object = allChildren[i];
        if (object.name == "clip") {
          object.material.visible = true;
        }
      }
    },
    hide() {
      var allChildren = this.scene.children;
      var numObjects = this.scene.children.length;
      for (var i = 0; i < numObjects; i++) {
        var object = allChildren[i];
        if (object.name == "clip") {
          object.material.visible = false;
        }
      }
    },
    init() {
      let container = document.getElementById("WebGL-output");
      this.width = container.clientWidth;
      this.height = container.clientHeight;
      this.camera = new THREE.PerspectiveCamera(
        60,
        this.width / this.height,
        100,
        12000
      );
      //初始为斜视
      this.camera.position.x = 0;
      this.camera.position.y = 4000;
      this.camera.position.z = 2250;
      this.camera.lookAt(new THREE.Vector3(0, 0, 0));
      this.camera.up.x = 0;
      this.camera.up.y = 0;
      this.camera.up.z = 1;
      this.clock = new THREE.Clock();
      this.scene = new THREE.Scene();
      this.scene.background = new THREE.Color(0xebebeb);
      this.webGLRenderer = new THREE.WebGLRenderer({
        antialias: true
      });
      this.webGLRenderer.setSize(this.width, this.height);
      this.controls = new THREE.TrackballControls(this.camera, container);
      this.controls.rotateSpeed = 1.0;
      this.controls.zoomSpeed = 1.5;
      this.controls.panSpeed = 1.0;
      this.controls.staticMoving = true;
      this.controls.dynamicDampingFactor = 0.3;
      container.appendChild(this.webGLRenderer.domElement);

      var cubeGeometry = new THREE.BoxBufferGeometry(5000, 4000, 400);
      var cubeMaterial = new THREE.MeshBasicMaterial({
        color: 0x54ff9f,
        opacity: 0.1,
        transparent: true
      });
      this.cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
      this.cube.name = "clip";
      this.cubeWire = new THREE.BoxHelper(this.cube, 0xffffff);
      this.cubeWire.name = "clip";
      this.scene.add(this.cube);
      this.scene.add(this.cubeWire);

      for (let i in this.gtpoints) {
        var gtpoint = this.gtpoints[i];
        var vertices = new Float32Array([
          gtpoint.x1 - 2245,
          gtpoint.y1 - 1845,
          (gtpoint.z1 - 382) * this.h,
          gtpoint.x2 - 2245,
          gtpoint.y2 - 1845,
          (gtpoint.z2 - 382) * this.h,
          gtpoint.x3 - 2245,
          gtpoint.y3 - 1845,
          (gtpoint.z3 - 382) * this.h,
          gtpoint.x4 - 2245,
          gtpoint.y4 - 1845,
          (gtpoint.z4 - 382) * this.h,
          gtpoint.x5 - 2245,
          gtpoint.y5 - 1845,
          (gtpoint.z5 - 382) * this.h,
          gtpoint.x6 - 2245,
          gtpoint.y6 - 1845,
          (gtpoint.z6 - 382) * this.h
        ]);
        var indexes = new Uint16Array([
          0,
          1,
          2,
          3,
          4,
          5,
          0,
          1,
          3,
          1,
          3,
          4,
          1,
          2,
          4,
          2,
          4,
          5,
          0,
          2,
          3,
          2,
          3,
          5
        ]);
        this.GTPGeometry = new THREE.BufferGeometry();
        this.GTPGeometry.addAttribute(
          "position",
          new THREE.BufferAttribute(vertices, 3)
        );
        this.GTPGeometry.addAttribute(
          "soil",
          new THREE.BufferAttribute(gtpoint.sid, 1)
        );
        this.GTPGeometry.index = new THREE.BufferAttribute(indexes, 1);
        if (gtpoint.sid == 1) {
          var material = new THREE.MeshBasicMaterial({
            color: this.color1,
            side: THREE.DoubleSide,
            clippingPlanes: this.clipPlanes
          });
        }
        if (gtpoint.sid == 2) {
          var material = new THREE.MeshBasicMaterial({
            color: this.color2,
            side: THREE.DoubleSide,
            clippingPlanes: this.clipPlanes
          });
        }
        if (gtpoint.sid == 3) {
          var material = new THREE.MeshBasicMaterial({
            color: this.color3,
            side: THREE.DoubleSide,
            clippingPlanes: this.clipPlanes
          });
        }
        if (gtpoint.sid == 4) {
          var material = new THREE.MeshBasicMaterial({
            color: this.color4,
            side: THREE.DoubleSide,
            clippingPlanes: this.clipPlanes
          });
        }
        if (gtpoint.sid == 5) {
          var material = new THREE.MeshBasicMaterial({
            color: this.color5,
            side: THREE.DoubleSide,
            clippingPlanes: this.clipPlanes
          });
        }
        if (gtpoint.sid == 6) {
          var material = new THREE.MeshBasicMaterial({
            color: this.color6,
            side: THREE.DoubleSide,
            clippingPlanes: this.clipPlanes
          });
        }
        if (gtpoint.sid == 7) {
          var material = new THREE.MeshBasicMaterial({
            color: this.color7,
            side: THREE.DoubleSide,
            clippingPlanes: this.clipPlanes
          });
        }
        var GTPMesh = new THREE.Mesh(this.GTPGeometry, material); //var GTPMesh = new THREE.Mesh(GTPGeometry, material);
        GTPMesh.name = "gtp";
        this.scene.add(GTPMesh);

        var wirematerial = new THREE.MeshBasicMaterial({
          wireframe: true,
          clippingPlanes: this.clipPlanes
        });
        var GTPWire = new THREE.Mesh(this.GTPGeometry, wirematerial);
        GTPWire.name = "gtp";
        this.scene.add(GTPWire);
      }

      this.webGLRenderer.localClippingEnabled = true;
      this.render();

      //添加window窗口调整监听事件
      window.addEventListener("resize", this.onWindowResize, false);
    },
    render() {
      var delta = this.clock.getDelta();
      this.controls.update(delta);
      requestAnimationFrame(this.render);
      this.webGLRenderer.render(this.scene, this.camera);
    },
    onWindowResize() {
      this.camera.aspect = this.width / this.height;
      this.camera.updateProjectionMatrix();
      this.webGLRenderer.setSize(this.width, this.height);
      this.controls.handleResize();
      this.render();
    },
    previous() {
      this.$router.go(-1);
    },
    nextStep() {
      this.$router.push({ name: "sec" });
    }
  },
  created() {
    this.loading = true;
    this.$axios
      .post("http://192.168.3.165:3102/dcvir/getData")
      .then(res => {
        this.loading = false;
        this.gtpoints = res.data;
        this.init();
        Notification.success({
          message: "模型加载完成!",
          duration: 2000,
          position: "bottom-right"
        });
      })
      .catch(console.log);
  }
};
</script>
<style lang="less" scoped>
.layercut {
  margin: 30px 0 15px 0;
  .c_top {
    padding: 0 0 0 20px;
    display: flex;
    justify-content: space-between;
    .left-nav {
      height: 100%;
      width: 205px;
      padding: 10px 10px;
      background-color: #fff;
      border: 1px solid #eaeaea;
      .optionShow {
        width: 100%;
        height: 35px;
        border-bottom: 1px dashed #eaeaea;
        .color {
          color: #333;
        }
        #optionShow {
          width: 100%;
          text-align: left;
          padding: 0;
          padding-left: 5px;
          line-height: 35px;
        }
      }
      .lithology {
        margin-top: 15px;
        label {
          font-size: 14px;
          display: flex;
          justify-content: space-between;
          height: 35px;
          margin-bottom: 15px;
          line-height: 35px;
          input {
            line-height: 21px;
            width: 32%;
            height: 35px;
            padding: 5px;
            -webkit-user-select: text;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 3px;
            outline: 0;
            background-color: #fff;
            -webkit-appearance: none;
          }
        }
        #color-change {
          width: 100%;
          border: 1px solid #409eff;
          color: #409eff;
        }
      }
      .input {
        font-size: 14px;
        label {
          display: block;
          width: 100%;
          height: 30px;
        }
      }
    }
    .webgl {
      height: 886px;
      width: 85%;
    }
  }
  .guid {
    width: 100%;
    .guidBar {
      display: flex;
      justify-content: space-between;
      width: 250px;
      height: 40px;
      margin: 15px auto 0;
    }
  }
}
</style>

